<template>
	<div class='home-welcome'>
		<div
			id="particles-js"
			class="animation"
		/>
		<div class="logo">
			<Avatar
				:src="LOGO"
				:size="120"
			/>
		</div>
		<h1>Create and share your ideas on Aha</h1>
		<div class="desc">
			你可以在Aha口袋平台查看其他人的优秀设计，或是寻找志同道合的伙伴一起完成创造，期待一起建设更大的知识库。
		</div>
		<el-button
			class="use-btn"
			size="large"
			plain
			type="primary"
			@click="$pushTo('DashboardCompProject')"
		>
			创建项目
		</el-button>
		<div class="hint">
			自由创建 无需费用
		</div>
	</div>
</template>

<script setup lang="ts">
import Avatar from '@/components/Avatar/index.vue'
import { LOGO } from '@/constants/index'
import { $pushTo } from '@/utils/functions'
import { onMounted } from 'vue'

onMounted(() => {
  window.particlesJS('particles-js', {
    'particles': {
      'number': {
        'value': 40,
        'density': {
          'enable': true,
          'value_area': 500
        }
      },
      'color': {
        'value': '#859bf4'
      },
      'shape': {
        'type': 'circle',
        'stroke': {
          'width': 0,
          'color': '#000000'
        },
        'polygon': {
          'nb_sides': 5
        }
      },
      'opacity': {
        'value': 0.5,
        'random': false,
        'anim': {
          'enable': false,
          'speed': 0.1,
          'opacity_min': 0.1,
          'sync': false
        }
      },
      'size': {
        'value': 3,
        'random': true,
        'anim': {
          'enable': false,
          'speed': 10,
          'size_min': 0.1,
          'sync': false
        }
      },
      'line_linked': {
        'enable': true,
        'distance': 150,
        'color': '#a4b4f7',
        'opacity': 0.4,
        'width': 1
      },
      'move': {
        'enable': true,
        'speed': 2,
        'direction': 'none',
        'random': true,
        'straight': false,
        'out_mode': 'out',
        'bounce': false,
        'attract': {
          'enable': false,
          'rotateX': 600,
          'rotateY': 1200
        }
      }
    },
    'interactivity': {
      'detect_on': 'canvas',
      'events': {
        'onhover': {
          'enable': true,
          'mode': 'grab'
        },
        'onclick': {
          'enable': true,
          'mode': 'push'
        },
        'resize': true
      },
      'modes': {
        'grab': {
          'distance': 140,
          'line_linked': {
            'opacity': 1
          }
        },
        'bubble': {
          'distance': 400,
          'size': 40,
          'duration': 2,
          'opacity': 8,
          'speed': 3
        },
        'repulse': {
          'distance': 200,
          'duration': 0.4
        },
        'push': {
          'particles_nb': 4
        },
        'remove': {
          'particles_nb': 2
        }
      }
    },
    'retina_detect': true
  })
})
</script>

<style lang="scss" scoped>
.home-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5%;
  text-align: center;
  cursor: default;
  user-select: none;
  background: linear-gradient(to top, rgba(133, 155, 244, 0.01) 50%, rgba(133, 155, 244, 0.22) 100%);

  .animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .logo {
    margin: 5% 0 0;
  }

  h1 {
    max-width: 800px;
    font-size: 80px;
    color: $primary1;
    letter-spacing: 2px;
  }

  .desc {
    max-width: 600px;
    margin-top: 20px;
    font-size: $sLarge;
    color: $dark3;
  }

  .use-btn {
    width: 200px;
    height: 50px;
    margin-top: 30px;
    font-weight: bold;
  }

  .hint {
    margin-top: 10px;
    color: $dark3;
  }
}
</style>
